/* eslint-disable */
import React from 'react';
import { Button, Icon } from 'antd';
import { VtxModal } from 'vtx-ui';
import styles from './mapSearch.less';
import { NAME_SPACE } from './config';
import {Map, Marker} from 'react-amap'

const mapCenter = [114.31	, 30.52]

class Index extends React.Component{
  constructor(props){
    super(props)
    this.map=null
    this.change = this.change.bind(this)
    this.markerPosition = {longitude: 120, latitude: 36};
    this.state = {
      isShow: false,
      longitude: 114.31,
      latitude: 30.52,
    }
    // this.amapEvents = this.amapEvents.bind(this)
  }

  change(Points){
    // console.log('可以出来')
    const {dispatch} = this.props
    this.setState({
      point: Points
    })
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'addForm',
        data: {
          longitude: Points[0],
          latitude: Points[1],
        }
      }
    })
  }

  render(){
    const {dispatch,
      mapVisable} = this.props

    const goBackClear = () => {
      dispatch({
        type: `${NAME_SPACE}/updateSubState`,
        payload: {
          sub: 'addForm',
          data: {
            longitude: '',
            latitude: '',
          }
        }
      })
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload:{
          mapVisable: false,
        }
      })
    }

    const goBack = () => {
      dispatch({
        type: `${NAME_SPACE}/updateState`,
        payload:{
          mapVisable: false
        }
      })
    }
  
    const modelProps = {
      footer: [
        <Button key="back" onClick={goBackClear}>返回</Button>,
        <Button key="sure" type='primary' onClick={goBack}>确定</Button>,
      ],
      onCancel:goBack,
      maskClosable: false,
      title:'详情',
      visible: mapVisable,
      width: 700,
    }

    const amapEvents = {
      created: (mapInstance) => {
        // console.log(mapInstance)
        // console.log(1)
        // console.log(mapInstance.getZoom())
        // console.log(mapInstance._amap_id)
      },
      click: (e) => {
        // console.log(e)
        let Points = [e.lnglat.getLng(), e.lnglat.getLat()]
        // console.log(Points)
        // const {dispatch} = this.props
        // dispatch({
        //   type: `${NAME_SPACE}/updateSubState`,
        //   payload: {
        //     sub: 'addForm',
        //     payload: {
        //       longitude: Points[0],
        //       latitude: Points[1],
        //     }
        //   }
        // })
        this.setState({
          longitude: Points[0],
          latitude: Points[1],
          isShow: true,
        })
        this.change(Points)
      }
    }

    const mapProps = {
      zoom: 12,
      center: mapCenter,
      // position: ['lng','lat'],
      plugins: ["ToolBar"],
    }

    const markerProps = {
      position: {longitude: this.state.longitude, latitude: this.state.latitude},
      // content: `<div style={{width: '30', height: '30', backgroundColor: 'red'}}></div>`,
      // content: <Icon type="thunderbolt" style={{fontSize: 24, color: 'red'}}/>,
      visible: this.state.isShow,
      zIndex: 500,
    }

    return(
      <div>
        <VtxModal {...modelProps}>
          <div className={styles.map}>
                <Map 
                  events={amapEvents} 
                  style={{width:'100%', height: '100%'}} 
                  amapkey={'26af0bc8d92fb85b3b5dcc39dba3e611'}
                  {...mapProps}
                >
                  <Marker {...markerProps}/>
                </Map>
          </div>
        </VtxModal>
      </div>
    )
  }
}

export default Index